<template>
  <!-- 各车间分时用电量统计组件 -->
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import debounce from '@/utils/debounce'
import echarts from "echarts"
export default {
  props: {
    width: {
      type: String,
      default: "0px"
    },
    height: {
      type: String,
      default: "0px"
    },
    ecdata: {}
  },
  data() {
    return {
      chart: null,
      color: ["#FF5227", "#FF9200", "#0780ED", "#00AFC3"],

    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        color: that.color,
        backgroundColor: "#fff",
        title: {
          text: "万元",
          left: 0,
          textStyle: {
            color: "#999",
            fontSize: "12",
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          formatter(p) {
            var y_name = p[0].name
            p.forEach((item, index) => {
              y_name += `<p>${item.marker}${item.seriesName}：${
                item.value === undefined ? '-' : item.value
                } 万元</p>`
            })
            return y_name
          },
          axisPointer: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          // 网格位置 right
          right: 0,
          left: 30,
          // 网格底部距离
          bottom: 55
        },
        legend: {
          // 图例宽度
          width: "90%",
          // 图例icon宽度
          itemWidth: 20,
          // 图例icon高度
          itemHeight: 10,
          // 图例位置  right
          right: 0,
          // 图例样式
          textStyle: {
            color: "#90979c",
            fontSize: "12"
          },
          data: [
            { name: "尖", icon: "roundRect" },
            { name: "峰", icon: "roundRect" },
            { name: "平", icon: "roundRect" },
            { name: "谷", icon: "roundRect" }
          ]
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#e5e5e5"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#999999",
              formatter: function (value, index) {
                // let s = value.split("#")[0]
                // let s1 = value.split("#")[1]
                // let s2 = s1.split("").join("\n")
                // //  return value.split("").join("\n")
                // return s + "#" + "\n" + s2
                return value
              }
            },
            data: that.origin?that.origin.map((item,index)=>{
              return item.name
            }):null
          }
        ],
        dataZoom: [
          {
            show: true,
            height: 25,
            bottom: 5,
            start: 50,
            end: 100,
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#999"
            }
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 0,
            end: 6
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                type: "dotted"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 0
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "尖",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            itemStyle: {
              color: "#FF5227"
            },
             data: that.origin?that.origin.map((item,index)=>{
              return item.elecTimeFee.tipFees
            }):null
          },

          {
            name: "峰",
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#FF9200"
            },
             data: that.origin?that.origin.map((item,index)=>{
              return item.elecTimeFee.peakFees
            }):null          
          },
          {
            name: "平",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            itemStyle: {
              color: "#0780ED"
            },
             data: that.origin?that.origin.map((item,index)=>{
              return item.elecTimeFee.flatFees
            }):null             
          },
          {
            name: "谷",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            itemStyle: {
              color: "#00AFC3"
            },
              data: that.origin?that.origin.map((item,index)=>{
              return item.elecTimeFee.valleyFees
            }):null              
          }
        ]
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, false)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
    rgba_color(color) {
      var color_arr = []
      for (let i = 0; i < color.length ;i++) {
        let num = color[i].split("#")[1]
        color_arr.push({
          a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
          b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.1)`
        })
      }
      return color_arr
    }
  }
}
</script>
